<template>
  <div class="erwei">
    <div class="img" v-loading="loading">
      <!-- 展示二维码 -->
      <img :src="qrDataUrl" alt="" width="200px" />
      <i class="mask" v-if="showCgMask" :style="maskBg" @click="updataCg"></i>
    </div>
    <p>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixin"></use>
      </svg>
      <b v-text="textForm"></b>
    </p>
  </div>
</template>

<script>
//二维码登入
/**
 * @建立socket链接
 *
 * @引入qecode
 */
import socketIo from "socket.io-client";
import qrcode from "qrcode";
import storage from "@/utils/storage";
import * as api from "@/api/user";
import invalidImg from "@/assets/img/invalidQr.png";
import scanSuccessImg from "@/assets/img/scancode.png";
//引入成功和失败扫码遮罩图片

export default {
  created() {
    // console.log(this.StorageUserInfo)
    //建立socket链接
    let io = socketIo("wss://chst.vip");
    //监听链接的时间
    io.on("connectSuccess", ({ sid }) => {
      //储存sid值
      storage.set("sid", sid);
      //首次这样获取
      this.getCgUrl(sid);
    });
    //失败该怎么调用
    io.on("invalidCode", (data) => {
      console.log(data);
      //点击刷新二维码
      this.textForm = "二维码失效点击刷新二维码";
      //展示遮罩
      this.showCgMask = true;
      //显示无效二维码遮罩样式
      this.maskBg.backgroundImage = `url(${invalidImg})`;
    });
    //扫码成功
    io.on("scancodeSuccess", async({state,wechatCode,msg}) => {
      //  console.log(data);
      //做到微信扫码返回值
      /**
        * msg:"已扫码"
        * state:true
        * status:200
        * wechatCode:"0615osFa177qBE0RlgIa1OuUVa45osFJ
        */
       //将wechatCode传到后台
       //users/wechatLogin
      //  console.log(wechatCode )
      //成功显示图片
      //扫码成功显示遮罩
      this.showCgMask = true;
      this.maskBg.backgroundImage = `url(${scanSuccessImg})`;
      //扫码成功之后将内容存在本地
     
      if(state){
         //调用微信登入接口
       let res = await api.wechatLoginApi(wechatCode);
       this.StorageUserInfo(res.data);
       //跳转页面
      //  this.$router.push("/home")
      }else{
         //返回错误
         console.error(msg)

      }

    });
  },
  props:{
    StorageUserInfo:{
      require:true
    }
  },
  methods: {
    //获取二维码
    async getCgUrl(sid) {
      //调用遮罩
      this.loading = true;
      //请求二维码地址
      let Eweima = await api.getQrcodeApi(sid);
      //结构一下这个并且起个别名:cgUrl
      let { scanCodeUrl: cgUrl } = Eweima.data;
      // console.log(cgUrl);
      //通过qrcode插件生成二维码
      qrcode.toDataURL(cgUrl, (err, url) => {
        //在终端打印错误
        if (err) throw err;
        this.qrDataUrl = url;
        //关闭遮罩
        this.showCgMask = false;
        //  console.log(url)
        //这个编码的格式可以生成二维码
        this.loading = false;
      });
    },
    //更新二维码
    updataCg() {
      //获取本地存储
      let sider = storage.get("sid");
      this.textForm = "扫描二维码";
      // console.log(sider);
      this.getCgUrl(sider);
    },
  },
  data() {
    return {
      //二维码图片
      cgImg: "",
      //是否显示遮罩
      showCgMask: false,
      loading: true,
      //二维码链接
      qrDataUrl: "",
      textForm: "扫描二维码",
      //maskBgSuccess:{}
      //扫码成成功或者失败切换
      maskBg: {
        //这里需要写成字符串
        backgroundImage: `url(${scanSuccessImg})`,
      },
    };
  },
};
</script>

<style lang="less" scoped>
.img {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
}
.mask {
  // 看一下这个代码
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-color: #fff;
  position: absolute;
  left: 0;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: 50%;
  cursor: pointer;
}
</style>
